<template>
    <div class="swiper-container" ref="swiper">
        <div class="swiper-wrapper" v-if="skuInfo">
            <div class="swiper-slide" v-for="(item,index) in skuInfo.skuImageList" :key="item.id">
                <img :src="item.imgUrl" :class="{active:index === selected}" @click="chooseImg(index)">
            </div>
        </div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>
</template>

<script>
    import {
        mapState
    } from 'vuex'
    import "swiper/swiper-bundle.min.css"
    import Swiper from "swiper/swiper-bundle.min.js"
    export default {
        name: "ImageList",
        data() {
            return{
                selected:0//选中的图片
            }
        },
        computed: {
            ...mapState({
                skuInfo: state => state.detail.goodsDetail.skuInfo
            })
        },
        methods: {
            chooseImg(index){
                this.selected = index
                this.$bus.$emit('chooseImg',index)
                
            }
        },
        watch: {
            "skuInfo.skuImageList": {
                deep: true,
                immediate: true,
                handler() {
                    //nextTick(cb),动态数据发生变化,页面渲染成功后, nextTick的回调函数才会执行
                    this.$nextTick(() => {
                        //this.$refs.swiper
                        new Swiper(this.$refs.swiper, {
                            loop: false, // 循环模式选项
                            slidesPerView: 5,
                            slidesPerGroup:2,
                            // 如果需要分页器
                            pagination: {
                                el: '.swiper-pagination',
                            },
                            // 如果需要前进后退按钮
                            navigation: {
                                nextEl: '.swiper-button-next',
                                prevEl: '.swiper-button-prev',
                            },
                        })
                    })
                },
                
            }
        },
    }
</script>

<style lang="less" scoped>
    .swiper-container {
        height: 56px;
        width: 412px;
        box-sizing: border-box;
        padding: 0 12px;

        .swiper-slide {
            display: flex;
            justify-content: center;
            width: 56px;
            height: 56px;

            img {
                width: 100%;
                height: 100%;
                border: 1px solid #ccc;
                padding: 2px;
                width: 50px;
                height: 50px;
                display: block;

                &.active {
                    border: 2px solid #f60;
                    padding: 1px;
                }

                &:hover {
                    border: 2px solid #f60;
                    padding: 1px;
                }
            }
        }

        .swiper-button-next {
            left: auto;
            right: 0;
        }

        .swiper-button-prev {
            left: 0;
            right: auto;
        }

        .swiper-button-next,
        .swiper-button-prev {
            box-sizing: border-box;
            width: 12px;
            height: 56px;
            background: rgb(235, 235, 235);
            border: 1px solid rgb(204, 204, 204);
            top: 0;
            margin-top: 0;

            &::after {
                font-size: 12px;
            }
        }
    }
</style>